<template>
  <div class="full-screen" @click="handleFullScreen">
    <el-icon><FullScreen /></el-icon>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isFull = ref(false)
const handleFullScreen = () => {
  const elementToFullscreen = document.documentElement
  if (isFull.value) {
    document.exitFullscreen().catch((err) => console.log(err))
  } else {
    elementToFullscreen.requestFullscreen && elementToFullscreen.requestFullscreen()
  }
  isFull.value = !isFull.value
}
</script>

<style scoped lang="scss">
.full-screen {
  margin-left: 20px;
}
</style>
